<template>
<!-- 代码位报告 -->
    <div class="ReportZy">
        <div class="panelgroup" v-if='routerpage'>
            <el-row :gutter="40">
                <el-col :xs="12" :sm="6" :lg="5" :xl="4" class="panel" v-for="(item , index) in tabarr" :key="index">
                    <div class="cardpanel">
                        <div class="ico_"><i :class="item.ico"></i></div>
                        <div class="infor">
                            <p><count-to :start-val="0" :end-val="item.number" :duration="2000"></count-to></p>
                            <div class="title">
                                <span>{{item.title}}</span>
                                <el-tooltip placement="bottom-end" v-if="item.tips!=''">
                                    <div slot="content">{{item.tips}}</div>
                                    <div class="ico">?</div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="carttitlebox" v-if='routerpage'>
            <div class="bt">
                <span :class="typleindex==0? 'on':''" @click="tabtype(0)">· 趋势图</span>
                <span :class="typleindex==1? 'on':''" @click="tabtype(1)">· TOP10代码位</span>
            </div> 
            <div class="select">
                <el-select 
                    v-model="title_value" 
                    @change="changeChartTitle" 
                    :multiple='typleindex==0?true:false'
                     placeholder="请选择" >
                    <el-option
                        v-for="item in barcartdata.data"
                        :key="item.title"
                        :label="item.title" :value="item.title" >
                        <span style="float: left">{{ item.title }}</span>
                        <span class="bg" :style="'position: absolute;width: 20px; height: 5px; display: block;top: 50%;right: 25%;background:'+item.color"></span>
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="echartsbox" v-if='routerpage'>
            <linecart :height="'300px'" :Chartdata="barcartdata" :titlevalue='title_value' :theme="'jazz'"></linecart>
        </div>
         <div class="title_bt">
            <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <!-- <div class="search" v-show="selectvalue!='' && selectvalue !='全部'">
                <el-input v-model="searchinput" placeholder="请输入搜索的内容"></el-input>
                <div class="button"><i class="el-icon-search"></i></div>
             </div> -->
             <div class="fr" style="float:right; margin-right:20px;">
               <el-date-picker
                    size="small"
                    v-model="time"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="timestamp"
                    @change="changeTime"
                    align="right">
                </el-date-picker>
            </div>
        </div>
         <div class="search_show" v-show="search_show">
            <el-row :gutter="40" >
                 <el-col :sm="10" :md="8" :lg="8" class="card">
                    <div class="bt">代码位：</div>
                    <div class="cardflex1">
                        <el-select v-model="selectvalue" filterable placeholder="代码位">
                            <el-option
                                v-for="item in select" 
                                :key="item.id"  
                                :label="item.name" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                  <el-col :sm="4" :md="8" :lg="3" class="card">
                    <el-button type="primary" @click="search">确定</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox" >
            <el-table-column prop="adsense" label="代码位" align="center" > </el-table-column>
            <el-table-column prop="s_date" align="center" label="统计日期"></el-table-column>
            <el-table-column prop="s_statistics" align="center" label="展现量"></el-table-column>
            <el-table-column prop="c_statistics" align="center" label="点击量"></el-table-column>
            <el-table-column prop="r_statistics" align="center" label="请求量"></el-table-column>
            <el-table-column   align="center" label="操作">
                    <template slot-scope="scope">
                        <el-link   type="primary" @click="handleReport(scope.row.adsense_id)">详情</el-link>
                    </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=userForm.page
            :page-size=page_size
            layout="total, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
          <el-drawer
            title="投放报告"
            :visible.sync="drawer"
             :append-to-body="true"
            :before-close="handleClose"
            custom-class="demo-drawer"
            ref="ReportAdvertising"
             size="90%">
              <div class="demo-drawer__content">
                    <div class="demo-drawer__contentbox">
                         <Report-advertising   v-if="drawer"  :itemcode="report_id"  />    <!--我的报告 投放报告  -->
                    </div>
                </div>
         </el-drawer>
    </div>
</template>
<script>
 import CountTo from 'vue-count-to';
 import linecart  from './comment/lincart.vue';
import ReportAdvertising from "@/views/report/report-Advertising.vue"
 import { axios_statisticsadsense ,axios_adversense } from "@/api/infor"; 
  const lineChartData = {
        linecart: {
            title:'2024-01-01 - 2024-01-07',
            type:'line',
            data:[
                {
                    title:'展现量',
                    list: [120, 82, 91, 154, 162, 140,145],
                    time:"2024-01-01",
                    color:"#5470c6"
                },
                {
                    title:'收入',
                    list: [1201, 812, 191, 1534, 1622, 1410,1145],
                    time:"2024-01-02",
                    color:"#91cc75"
                },
                {
                    title:'点击量',
                    list: [1220, 812, 911, 1354, 162, 1410,1145],
                    time:"2024-01-03",
                    color:"#fac858"
                },
                {
                    title:'eCPM',
                    list: [120, 82, 931, 154, 1632, 1430,145],
                    time:"2024-01-04",
                    color:"#ee6666"
                },
                {
                    title:'CPC',
                    list: [1120, 832, 91, 154, 162, 140,145],
                    time:"2024-01-05",
                    color:"#73c0de",
                    
                },
                {
                    title:'点击率',
                    list: [420, 82, 91, 154, 162, 440,145],
                    time:"2024-01-06",
                    color:"#3ba272"
                },
                {
                    title:'填充率',
                    list: [120, 82, 21, 154, 162, 440,145],
                    time:"2024-01-07",
                    color:"#fc8452"
                }
            ]
        },
    }
export default {
    name:'reportCode',
    data(){
        return{
            drawer:false,   //报告
            routerpage:false,
            report_id:'',
            page_size:1,
            total:1,
            tabarr:[
                {
                    title:'展现量',
                    number:2912.12,
                    ico:'el-icon-s-promotion',
                    tips:'整体报告包含百度联盟数据，若您在SSP中以富媒体方式投放百度联盟合作代码，整体报告展现量重复统计，请使用数据来源过滤Union平台。',
                },
                {
                    title:'点击量',
                    number:2912.12,
                    ico:'el-icon-thumb',
                    tips:'',
                },
                {
                    title:'点击率',
                    number:2912.12,
                    ico:'el-icon-s-data',
                    tips:'',
                },{
                    title:'收入',
                    number:2912.12,
                    ico:'el-icon-s-ticket',
                    tips:'直投及优先交易发生的收入是根据媒体在广告投放中填写的单价来计算（不填则不计算），百度默认只结算竞价广告收入。',
                }
                 
            ],
            typleindex:0,
            title_value:[],
             userForm:{
                page:1,
                type:1,           //报告类型 1代码位报告 2投放报告 3物料报告 4点击详情
                adsense_id:0,  //type =1 传 筛选条件  1-代码位ID
                ad_id:'',       //type =2 传 筛选条件   2-(投放报告)-广告ID
                wuliao_id:'',  //type =4 传 筛选条件  3-物料报告 物料ID	
                start_date:'',  //开始时间
                end_date:'',  //结束时间
            },
            searchinput:'',  //顶部的搜索栏目
             search_show:true,  //
            selectvalue:0,     //
            select:[{name:"全部",id:0}],
            barcartdata:lineChartData.linecart,
            tableData: [], //表格的数据
            time:[],
            pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }],
                    onPick:(time) => {
                        // 如果选择了只选择了一个时间
                        if (!time.maxDate) {
                            let timeRange = 60*24*60*60*1000 // 2天
                            this.minTime = time.minDate.getTime() - timeRange // 最小时间--前面两天
                            this.maxTime = time.minDate.getTime() + timeRange // 最大时间--后面两天
                            // 如果选了两个时间，那就清空本次范围判断数据，以备重选
                        } else {
                            this.minTime = this.maxTime = null
                        }
                    },
                    disabledDate:(time) => {
                        // onPick后触发
                        // 该方法会轮询当3个月内的每一个日期，返回false表示该日期禁选
                        if(this.minTime && this.maxTime){
                            return time.getTime() < this.minTime || time.getTime() > this.maxTime
                        }
                    }
                },
        }
    },
     components:{
        CountTo,
        linecart,
        ReportAdvertising
    },
     props:{
        itemcode:{},
       
    },
    created(){
        this.title_value= this.titlevalue();
        if(this.itemcode){
            this.userForm.adsense_id=this.itemcode;
            this.selectvalue=this.itemcode;
        }
        this.getdatalist("refresh")
        this.axiosAdversense();
       
    },
    watch:{
        $route:{
            handler(nv){
                if(nv.name=='ReportCode'){
                    // this.routerpage=true;
                }
            },
            immediate:true
        },
       itemcode(a){
            if(a){
                this.userForm.adsense_id=a;
                this.selectvalue=a;
                this.getdatalist("refresh")
            }
        }
    },
    methods:{
        //  关闭报告
        handleClose(){
             this.drawer=false;
         },
        //默认显示头2条
         titlevalue(){ 
            let arr=[];
            let that=this;
            that.barcartdata.data.slice(0,2).forEach((item)=>{arr.push(item.title);})
            return arr;
        },
        changeChartTitle(val){
            if(this.typleindex==0){
                this.title_value=val.slice(-2);
                if(val.length==0){
                    this.title_value=['展现量']
                }
            }else{
                 this.title_value=val;
            }
        },
        // 切换图表
        tabtype(id){
          this.typleindex=id;
          if(id==1){
            this.title_value='展现量';
            this.barcartdata.type='bar'
          }else{
            this.title_value= this.titlevalue();
             this.barcartdata.type='line'
          }
        },
        // 显示投放报告
        handleReport(id){
            this.report_id=id;
             this.drawer=true;
        },
        // 搜索
        search(){
            this.userForm.adsense_id=this.selectvalue;
             this.getdatalist('refresh')
        },
        // 分页
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 切换分页
        handleCurrentChange(val) {
              this.userForm.page=val;
             this.getdatalist()
        },
        // 跳转其他路由
        routerlink(id){
             this.$router.push({ path: "/report" ,query:{data:id} }) .catch(err => {return err});
        },
           // 获取列表数据
        getdatalist(type){
            if(type=="refresh"){
                this.userForm.page=1;
            }
            this.loading=true;
            axios_statisticsadsense(this.userForm).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.tableData=res.data.data;
                    this.page_size=res.data.page_size;
                    this.total=Number(res.data.total);
                }else{
                    this.tableData=[];
                    this.page_size=1;
                    this.total=0;
                    this.$message.error(res.data.msg);
                }
            }).catch(( )=>{})
        },
        // 获取代码位的分类
        axiosAdversense(){
            axios_adversense({model:2,flow_type:0}).then((res) => {
                  this.select.push(res.data.data);
                 this.select=this.select.flat(Infinity)
            }).catch(( )=>{})
           
        },
        // 时间范围事件
        changeTime(val){
            this.userForm.start_date=parseInt(val[0]/1000)
            this.userForm.end_date=parseInt(val[1]/1000)
            this.search()
            this.$message({
                message: val,
                type: 'success'
            });
            
        },
    }
}
</script>